<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- 工具栏 -->
      <PageTool>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="AddEmployees">添加员工</el-button>
        </template>
      </PageTool>
      <!-- 表格 -->
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="username"
            label="用户名"
          />
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="setEmployees(row.id)">设置角色</el-button>
              <el-button size="small" @click="editEmployees(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delEmployees(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <!--
                prev: 左箭头
                pager：页码
                next：右箭头
                total：总数量
                page-size: 设置每页展示的数据数量
               -->
          <div class="block">
            <span class="demonstration" />
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[pageSize]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="pageChange"
            />
          </div>
        </el-row>
      </template>
      <AddEmployees
        ref="addEmployees"
        :show-dialog.sync="showDialog"
        @updateEvent="getEmployees"
      />
      <SetEmployees
        :show-dialog.sync="visibleDialog"
      />
    </div>
  </div>
</template>
<script>
import AddEmployees from './components/addEmployees.vue'
import SetEmployees from './components/setEmployees.vue'
import { getEmployees, delEmployees, getEmployeesList } from '@/api/employees'
export default {
  components: { AddEmployees, SetEmployees },
  data() {
    return {
      tableData: [],
      showDialog: false,
      currentPage4: 4,
      visibleDialog: false,
      page: 0, // 第几个开始请求数据数量
      pageSize: 4, // 每个分页多少条数据
      total: 0 // 数据总数量
    }
  },
  async created() {
    await this.getEmployees()
    await this.getEmployeesListNum()// 获取客户数量
  },
  methods: {
    async getEmployeesListNum() { // 获取客户总数量
      const res = await getEmployeesList()
      console.log(88, res)
      this.total = res.data
    },
    // 添加员工
    AddEmployees() {
      this.showDialog = true
    },
    // 删除员工
    delEmployees(id) {
      // 询问框
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1 && this.page !== 0) {
          this.page = this.page - this.pageSize
        }
        // 调用接口 实现删除
        await delEmployees(id)
        // 更新列表
        this.getEmployees()
        // 更新请求数量
        this.getEmployeesListNum()
      }).catch(err => {
        console.log('点击了取消按钮：', err)
      })
    },
    pageChange(page) { // 分页切换发送请求
      this.page = (page - 1) * this.pageSize
      this.getEmployees()
      this.getEmployeesListNum()
    },
    // 编辑员工
    editEmployees(id) {
      this.showDialog = true
      this.$refs.addEmployees.getEmployeess(id)
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 获取角色列表
    async getEmployees() {
      const res = await getEmployees({
        _limit: this.pageSize,
        _start: this.page
      })
      this.tableData = res.data
    },
    // 设置角色
    setEmployees() {
      this.visibleDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 25px;
  }
  &-text {
    font-size: 30px;
    line-height: 20px;
  }
}
</style>
